<template>
	<view class="pagesRateCom">
		<view class="rateCom_container">
			<view class="rateCom_container_rate">
				<view class="rateCom_container_rate_title">
					服务评价
				</view>
				<u-rate count="5" size='48' v-model="form.evaluate"></u-rate>

			</view>
			<view class="rateCom_container_text">
				<view class="rateCom_container_text_title">
					您的意见和建议
				</view>
				<view class="rateCom_container_text_content">
					<u--textarea maxlength='400' count autoHeight placeholder="请输入内容" v-model="form.content" clearable>
					</u--textarea>
				</view>
			</view>
			<view class="rateCom_container_btnBox">
				<view class="btn">
					<u-button class="custom-style" @click="cancel" size="mini">
						取 消
					</u-button>
				</view>
				<view class="btn">
					<u-button class="custom-style" @click="addRate" type="primary" size="mini">
						提 交
					</u-button>
				</view>
			</view>


		</view>
	</view>

</template>

<script>
	import request from '@/utils/request'
	export default {
		name: "rateCom",
		props: ['doctorObj'],
		data() {
			return {
				form: {
					evaluate: 4,
					content: '',
					doctorId: ''
				}

			};
		},
		mounted() {
			if (this.doctorObj) {
				this.form.doctorId = this.doctorObj.expertId
			}

		},
		methods: {
			addRate() {
				if (this.form.content == '' || this.form.content == null || this.form.content == undefined) {
					this.$modal.showToast('请输入意见和建议~')
					return false
				}
				let data = {
					...this.form
				}
				request({
					method: 'POST',
					url: '/service/evaluation',
					data: data
				}).then(res => {
					// 请求成功
					if (res.code == 200) {
						this.$modal.showToast('评价成功~')
						this.$emit('refreshRateEvent')
					}
				})
			},
			cancel() {
				this.$emit('closeRateEvent')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagesRateCom {
		.rateCom_container {
			padding: 20px 10px;
			width: 560rpx;

			&_rate {

				&_title {
					font-size: 32rpx;
					font-weight: 700;
					line-height: 40rpx;
					margin-right: 20rpx;
				}

				&_title::before {
					content: '*';
					color: red;
				}

			}

			&_text {
				margin-top: 10px;

				&_title {
					font-size: 32rpx;
					font-weight: 700;
				}

				&_title::before {
					content: '*';
					color: red;
				}

				&_content {
					margin-top: 10px;
				}
			}

			&_btnBox {
				margin-top: 20px;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.btn {

					// width: 220rpx;
					.custom-style {
						font-size: 30rpx;

					}
				}
			}

		}
	}
</style>